<template>
  <div class="app">
    <div class="commentbar">
      <h5>发表评论</h5>
      <van-divider :style="{  borderColor: '#333'}"></van-divider>
      <textarea style="resize:none" v-model="content"></textarea>
      <van-button type="info" block @click="addcomment">发表评论</van-button>
      <div class="connects" v-for="(item, i) in commectusers" :key="i">
        <div>第{{i + 1}}楼 用户:{{item.user_name}} 发表时间：{{item.add_time.split('T')[0]}}</div>
        <div>{{item.content}}</div>
      </div>
      <van-button plain hairline type="danger" block @click="getmorme()" class="btns">加载更多</van-button>
      <!-- 设置maxlength和show-word-limit属性后会在底部显示字数统计 -->
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      content: '',
      commectusers: [],
      pageindex: 1
    }
  },
  created () {
    this.getuserelement()
  },
  methods: {
    async getuserelement () {
      var ids = window.location.hash.split('=')
      var id = ids[1]
      const { data: res } = await this.$http.get(
        '/api/getcomments/' + id + '?pageindex=' + this.pageindex
      )
      this.commectusers = res.message
    },
    async addcomment () {
      if (this.content.trim() === '') {
        return this.$toast('请输入内容后再提交')
      }
      var ids = window.location.hash.split('=')
      var id = ids[1]
      const { data: res } = await this.$http.post('/api/postcomment/' + id, {
        content: this.content
      })
      console.log(res)
      this.getuserelement()
      this.content = ''
    },
    async getmorme () {
      this.pageindex++
      var ids = window.location.hash.split('=')
      var id = ids[1]
      const { data: res } = await this.$http.get(
        '/api/getcomments/' + id + '?pageindex=' + this.pageindex
      )
      this.commectusers.push(...res.message)
    }
  }
}
</script>
<style scoped lang="less">
.commentbar {
  padding: 0 5px;
  margin-bottom: 200px;
  margin-top: 60px;
  h5 {
    font-size: 18px;
  }
  textarea {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    border-color: #ccc;
  }
  .connects div {
    background-color: #ccc;
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
  }
  .connects div:nth-child(2) {
    background-color: #fff;
    padding: 0 30px;
  }
}
</style>
